/*
 * jQuery Github Widgets Default Theme
 *  * 
 * Copyright 2012, Utensil Song
 * https://github.com/utensil
 * 
 * Released under the MIT licenses.
 * 
 * Written in SCSS(http://sass-lang.com/), you can use the following command to regenerate the corresponding CSS file if you have the ruby gem `sass` installed:
 * 
 * sass jquery-github-widget-default-theme.css.scss > jquery-github-widget-default-theme.css
 * 
 */
$github-widget-background-color: white;
$github-widget-glow-color: #333333;
$github-widget-stat-color: black;
$github-widget-note-color: #999;
$github-widget-gradient-dark-color: #FAFAFA;
$github-widget-gradient-light-color: #EFEFEF;
$github-widget-border-color: #EEE;
$github-widget-border-dark-color: #DDD;
$github-widget-border-radius: 20px;
$github-widget-repos-list-height: 300px;
$github-widget-repos-list-color: #08C;
$github-widget-repos-list-color-hover: #005580;

.github-widget {
  
  //default width
  width: 450px;
  //horizontal align: center
  margin-left: auto;
  margin-right: auto;
  
  // Make fonts prettier
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  
  a, a:hover, a:active {
    // so the links wouldn't feel like ancient one
    text-decoration: none;
    outline: none;
  }
  
  ul {
    
    //reset margin/padding so the default of ul/li wouldn't take effect
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    
    li {
      //reset li to not a li
      list-style-type: none;
    }
  }
  
  ul.github-widget-stat { 
    //gradients TODO IE filters?
    background: $github-widget-gradient-dark-color;
    background: -webkit-gradient(linear,left top,left bottom,from($github-widget-gradient-light-color),to($github-widget-gradient-dark-color));
    background: -moz-linear-gradient(top,$github-widget-gradient-light-color,$github-widget-gradient-dark-color);   
    
    //round cornor for the top
    border: 1px solid $github-widget-border-dark-color;
    border-radius: $github-widget-border-radius $github-widget-border-radius 0px 0px;
    
    & > li {
      display: inline-block;
      
      &.github-widget-avatar {        
        
        //reserve some room in all direction 
        margin: 10px 10px 10px 10px;
        //becasue of left-top rounded corner
        margin-left: $github-widget-border-radius;
        margin-top: $github-widget-border-radius;
        
        img {
          
          //image size
          height: 60px;
          width: 60px;
          
          //remove image border under IE
          outline: none;
          border: 0px;
          
          //make avatar feels more natural
          border-radius: 5px;          
          &:hover {
            box-shadow: 1px 1px 1px $github-widget-glow-color;
          }
        }
      }
      
      &.github-widget-username {        
        font-size: 36px;
        font-weight: bold;
        
        vertical-align: 18px; //lift half of the font size to center it vertically        
        
        color: #495961;
        text-shadow: 1px 1px 0 white;
        
        //make the counters half a avatar away
        margin-right: 30px;
      }
      
      &.github-widget-repos-count, &.github-widget-followers-count {
        
        //reserve some room in all direction 
        margin: 10px 10px 10px 10px;        
        //becasue of left-top rounded corner
        margin-top: $github-widget-border-radius;
        
        //text styling
        text-align: center;         
        line-height: 36px;
                  
        & > a { 
             
          strong {
            display: block;
            font-size: 36px;
            font-weight: bold;
            color: $github-widget-stat-color;
          }
          
          span {
            display: block;
            font-size: 11px;
            color: $github-widget-note-color;
          }
          
          &:hover {
            text-decoration: none;
            
            strong {
              text-shadow: 1px 1px 1px $github-widget-glow-color;
            }
            
            span {
              color: $github-widget-stat-color;
            }
          }
        }
      }
    }
    
    //IE 7 hack to fix ul/li display
    & > li {
      *display: inline;
    }
  }

  
  ul.github-widget-repos-list {
    
    height: $github-widget-repos-list-height;
    //TODO because we don't have pagination yet, so we use scrolling instead
    overflow-y: scroll;
    
    a {
      color: $github-widget-repos-list-color;
      
      &:hover {
        color: $github-widget-repos-list-color-hover;
      }
    }
    
    & > li {
      display: block;      
      border: 1px solid $github-widget-border-dark-color;
      border-top: none;
      
      //In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly
      //giving the parent element a higher z-index actual fixes the bug
      //http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
      z-index: 10;
            
      h3 {
        margin: 0px 0px 0px 0px;
        padding: 8px 8px 8px 8px;
        
        z-index: 0;
        
        //background-images
        padding-left: 25px; //make room for background-image
        background-image: url(../images/icon-public.png);
        background-position: 5px 50%;
        background-repeat: no-repeat;
        
        &.fork-flag {
          background-image: url(../images/icon-fork.png);
        }
        
        & > a:hover {
          text-decoration: underline;
        }
      }
      
      ul.repo-stats {
        display: block;
        font-size: smaller;
        
        //overlay to the right
        float:right;
        z-index: 5; 
        
        margin: 0px 0px 0px 0px;
        padding: 8px 8px 8px 8px;       
        
        & > li {
          display: inline-block;
          color: $github-widget-note-color;
          font-weight: bold;

          &.language {
            text-align: right;
            padding-right: 5px;   
          } 
                    
          & > a {            
            padding-right: 5px;            
            
            //background-images
            padding-left: 20px;//make room for background-image
            background-repeat: no-repeat;
            background-position: 2px;         
            
            &.watchers {
              background-image: url(../images/watchers.png);
            }
            
            &.forks {
              background-image: url(../images/forks.png);
            }
          }
        }
        
        //IE 7 hack to fix ul/li display
        & > li {
          *display: inline;
        }
      }
      
      .body {
        padding: 10px 10px 10px 10px;
        border-top: 1px solid $github-widget-border-color;
        
        //gradients
        background: $github-widget-gradient-dark-color;
        background: -webkit-gradient(linear,left top,left bottom,from($github-widget-gradient-dark-color),to($github-widget-gradient-light-color));
        background: -moz-linear-gradient(top,$github-widget-gradient-dark-color,$github-widget-gradient-light-color);
        
        .updated-at {
          font-size: smaller;
          color: $github-widget-note-color;
        }
      }
      
    }
  }

}
